<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('上传图片')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg" style="margin-top: 0px;">
    <div class="row">

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>展示图 <small></small></h5>
                </div>
                <div class="ibox-content">
                    <div class="file-loading">
                        <input id="fileinput-img" name="file" type="file" accept="image/*" multiple="multiple" data-max-file-count="5">
                    </div>
                    <span><i class="fa fa-info-circle"></i>最多5张，每张不能超过4M，【移除】移除本次选择。</span>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "shop/product";
        var imgData = [[${imgInfo}]]
        var uploadImageUrl = ctx + "common/upload/product";
        var deleteImageUrl = ctx +"system/del/img/1";
        var productId = [[${productId}]]

        $(document).ready(function () {
            $("#fileinput-img").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': uploadImageUrl,
                allowedFileType : ['image'],
                allowedFileExtensions : ['jpg','jpeg','png','gif'],
                previewFileType :'image',
                maxFileSize: (1024 * 4),
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreviewFileType: 'image',
                initialPreview: imgData.url,
                initialPreviewConfig: imgData.config
            }).on("fileuploaded", function (event, data, previewId, index) {
                //console.log("data:"+data);
                //console.log(previewId);

                var formData = new FormData();
                formData.append('productId', productId);
                formData.append('imgSrc', data.response.fileName);
                postRequest(prefix + "/uploadImage", formData, previewId);

            }).on("filebatchselected", function(event, files) {
                $(this).fileinput("upload");

            }).on("filecleared",function(event, data, msg){
                console.log("========="+data);

            }).on("filesuccessremove",function (event, previewId, extra) {
                if(confirm("确定删除此图吗？")){
                    //这里可以调用接口删除服务器原文件
                    //console.log("@==="+previewId);
                    //console.log(extra);

                    var imgId = $("#input_"+previewId).val();
                    var formData = new FormData();
                    formData.append('key', imgId);
                    postRequest(deleteImageUrl, formData);
                } else {
                    return false;
                }
            });
        });


        var that = this;
        //post请求
        function postRequest(url, formData, previewId) {
            $.ajax({
                url: url,
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    if (result.code == that.web_status.SUCCESS) {
                        $.modal.msgSuccess(result.msg);
                        addImgInfo(previewId, result.imgId);

                    } else if (result.code == that.web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            });
        }

        function addImgInfo(previewId, imgId) {
            if(previewId != undefined && previewId != null){
                $("#fileinput-img").before("<input name=\"imgId\" id='input_"+previewId+"' value='"+imgId+"' type=\"hidden\">")
            }
        }

        function submitHandler() {
            $.modal.close();
        }

    </script>

</body>
</html>